<template>
    <div>
        <el-col :span="12">
            <el-card shadow="never" style="background-color: #409EFF">
                <div class="number-icon-main"><i class="fa fa-graduation-cap number-icon"></i></div>
                <div class="number-grow-warp"><span class="number-grow">{{userCount}}人</span></div>
                <div class="number-title">平台用户总数</div>
            </el-card>
        </el-col>
    </div>
</template>

<script>
export default {
    name: "UserCount",
    data() {
        return {
            userCount: 0
        }
    },
    created() {
        this.getUserCount()
    },
    methods: {
        // 获取系统用户总数
        getUserCount() {
            this.$api.user.countUser().then(res => {
                if(res.data.code === 2000) {
                    this.userCount = res.data.data
                }
            })
        },
    }
}
</script>

<style scoped>
    .number-icon-main{
        margin-bottom: 25px;
    }
    .number-icon{
        color: #ffffff;
        display: inline-block;
        speak: none;
        font-style: normal;
        font-size: 24px;
        font-weight: 400;
        font-variant: normal;
        text-transform: none;
        text-rendering: optimizeLegibility;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        vertical-align: -.125em;
        text-align: center;
    }
    .number-title{
        color: rgb(255, 255, 255);
        font-size: 12px;
        font-weight: 500;
    }
    .number-grow-warp{
        transform: translateZ(0);
    }
    .number-grow {
        color: rgb(255, 255, 255);
        font-size: 24px;
        font-weight: 600;
        letter-spacing: 2.67px;
        display: block;
        margin-bottom: 10px;
    }
</style>
